<script>
import empty from "../../../components/empty.vue"
import UniLoadMore from "../../../uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
import { handleUrlParams } from "../../../utils"
import articleList from "./components/articleList.vue"
import questionList from "./components/questionList.vue"
import wordList from "./components/wordList.vue"

export default {
  name: "index",
  components: { UniLoadMore, empty, articleList, questionList, wordList },
  data() {
    return {
      currentTab: "question",
      tabList: [
        { value: "question", label: "题目" },
        { value: "vocabulary", label: "单词" },
        { value: "article", label: "资讯文章" },
      ],
    }
  },
  onLoad(query) {
    if (query.currentTab) {
      this.currentTab = query.currentTab
    }
    uni.showLoading({
      title: "加载中",
      mask: true,
    })
    this.$nextTick(() => {
      this.currentComponentInstance()
        .resetPaginationAndLoadData()
        .finally(() => {
          uni.hideLoading()
        })
    })
  },
  methods: {
    handleUrlParams,
    // 切换 tab 页面
    tabItemClick(val) {
      this.currentTab = val
      this.$nextTick(() => {
        this.currentComponentInstance().resetPaginationAndLoadData()
      })
    },
    // 获取当前组件实例
    currentComponentInstance() {
      switch (this.currentTab) {
        case "question":
          return this.$refs.questionList
        case "vocabulary":
          return this.$refs.wordList
        case "article":
          return this.$refs.articleList
      }
    },
  },
  //下拉刷新
  onPullDownRefresh() {
    this.currentComponentInstance()
      .resetPaginationAndLoadData()
      .finally(() => {
        uni.stopPullDownRefresh()
      })
  },
  //滑到底加载更多
  onReachBottom() {
    this.currentComponentInstance().reachBottom()
  },
}
</script>

<template>
  <view class="page">
    <!--		收藏题目 / 收藏单词 标签切换-->
    <view class="tab-list">
      <view
        class="tab-item"
        v-for="item in tabList"
        :key="item.value"
        :class="[item.value === currentTab ? 'active' : 'inactive']"
        @click="tabItemClick(item.value)"
      >
        <view class="text">
          {{ item.label }}
          <view class="active-line" v-show="item.value === currentTab"></view>
        </view>
      </view>
    </view>

    <!--		单词列表-->
    <word-list v-if="currentTab === 'vocabulary'" ref="wordList"></word-list>
    <!--		题目列表-->
    <question-list v-else-if="currentTab === 'question'" ref="questionList"></question-list>
    <!--		文章列表-->
    <article-list v-else-if="currentTab === 'article'" ref="articleList"></article-list>
  </view>
</template>

<style scoped lang="scss">
.page {
  background: var(--gray-background-color);
  min-height: 100vh;
  padding: {
    top: 100rpx;
    bottom: env(safe-area-inset-bottom);
  }

  .tab-list {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    display: flex;
    background: white;
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);

    .tab-item {
      width: 0;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100rpx;

      &.active {
        > .text {
          color: var(--text-color-theme);
          font-weight: 500;
        }
      }

      > .text {
        font-size: 34rpx;
        position: relative;
      }

      .active-line {
        position: absolute;
        bottom: -20rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 50%;
        height: 6rpx;
        border-radius: 3rpx;
        background: var(--text-color-theme);
      }
    }
  }
}
</style>
